<template>
  <div class="app-container">
    <el-form :inline="true" :model="form" label-width="120px" size="mini">
      <el-form-item label="广告位编号：" prop="posNo">
        <el-input v-model="form.posNo" />
      </el-form-item>
      <el-form-item label="广告位名称：" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-plus" type="success" @click="handleCommand('add')">新增</el-button>
        <el-button icon="el-icon-search" type="primary" @click="getData">搜索</el-button>
        <el-button icon="el-icon-refresh" type="danger" @click="clearForm">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border size="mini" v-loading="loading" empty-text="暂无数据">
      <el-table-column label="广告位编号" align="center" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.posNo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="广告位名称" align="center" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="描述" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.description }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button size="mini" type="warning" icon="el-icon-edit" @click="handleCommand('edit', scope.row.id)">
            编辑
          </el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleCommand('del', scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
        :page-sizes="[5, 10, 15]" :page-size="pageSize" layout="total, sizes, prev, pager, next"
        :total="total"></el-pagination>
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px" center>
      <el-form ref="dialogForm" :model="dialogForm" label-width="120px" size="mini" :rules="rules">
        <el-form-item label="广告位编号：" prop="posNo">
          <el-input v-model="dialogForm.posNo" />
        </el-form-item>
        <el-form-item label="广告位名称：" prop="name">
          <el-input v-model="dialogForm.name" />
        </el-form-item>
        <el-form-item label="描述：" prop="description">
          <el-input v-model="dialogForm.description" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { ad_pos_page, ad_pos_add, ad_pos_detail, ad_pos_del, ad_pos_update } from '@/api/adPos';

export default {
  data() {
    return {
      tableData: [],
      loading: false,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      form: {
        name: undefined
      },
      dialogVisible: false,
      dialogTitle: '',
      dialogForm: {
        posNo: undefined,
        name: undefined,
        description: undefined
      },
      rules: {
        posNo: [{
          required: true, message: '请输入广告位编号', trigger: 'blur'
        }],
        name: [
          { required: true, message: '请输入广告位名称', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      this.loading = true;
      this.form.pageNum = this.pageNum;
      this.form.pageSize = this.pageSize;
      const res = await ad_pos_page(this.form);
      this.tableData = res.records;
      this.total = Number.parseInt(res.total);
      this.loading = false;
    },
    handleSizeChange(e) {
      this.pageSize = e;
      this.getData();
    },
    handleCurrentChange(e) {
      this.pageNum = e;
      this.getData();
    },
    clearForm() {
      this.form = {
        name: undefined
      };
      this.getData();
    },
    handleCommand(command, id) {
      this.resetForm()
      if (command === 'add') {
        this.dialogTitle = '新增广告位';
        this.dialogVisible = true;
      } else if (command === 'edit') {
        this.dialogTitle = '编辑广告位';
        this.reqdetail(id);
        this.dialogVisible = true;
      } else if (command === 'delete') {
        this.deletedOpt(id);
      }
    },
    cancel() {
      this.dialogVisible = false;
    },
    deletedOpt(id) {
      this.$confirm('此操作将永久删除该广告位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await ad_pos_del(id);
        this.$message.success(res);
        this.getData();
      })
    },
    async reqdetail(id) {
      const res = await ad_pos_detail(id);
      this.dialogForm = res;
    },
    async submitForm() {
      const validateRes = await this.$refs.dialogForm.validate;
      if (validateRes) {
        let res;
        if (this.dialogForm.id) {
          res = await ad_pos_update(this.dialogForm);
        } else {
          res = await ad_pos_add(this.dialogForm);
        }
        this.$message.success(res);
        this.dialogVisible = false;
        this.getData();
      }
    },
    resetForm() {
      this.dialogForm = {
        id: undefined,
        posNo: undefined,
        name: undefined,
        description: undefined,
      }
    }
  }
}
</script>

<style lang="less" scoped></style>
